<template>
	<view class="page">
		<view>
			<zwp-draw-pad ref="drawview" :width="800" :height="600" />
		</view>
		<!-- 功能区 -->
		<view class="button">
			<view @click="padinit()">清除</view>
			<view @click="padsave(2)">拒绝</view>
			<view @click="padsave(1)">确定</view>
		</view>
	</view>
</template>

<script>
	import zwpdrawpad from '@/components/zwp-draw-pad/zwp-draw-pad.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			zwpdrawpad
		},
		data() {
			return {
				signAgenda: {
					files: "",
					Name: "", //姓名
					company: "", //当前公司
					prjInfoId: 0, //项目Id
					confirmBy: "", //签收人Id
					confirmStatus: 1, //状态 --签收状态 1签收 2拒绝
				},
				// 环氧
				// EpoxySignAgenda
				epoxySignAgenda: {
					ConfirmUserId: '', //操作人
					SignImgUrl: '', //图片地址
					ConfirmName: '', //签收人姓名
					ConfirmPhone: '', //签收人手机号,
					ConfirmCompany: '', //签收人公司
					EpPrjId: '', //项目Id
					PlanId: '', //派工单Id
					ConfirmStatus: 2, //状态 --签收状态
				},
				export: true, //环氧
				aa: {
					searchValue: "",
					pageNo: 1,
					pageSize: 10,
					sortField: "",
					sortOrder: "",
					descStr: "",
					companyName: ""
				},

			}
		},
		onLoad(option) {
			console.log('最后的option', option);
			this.id = option.code;
			this.epoxySignAgenda.EpPrjId = option.epPrjId //项目id
			this.epoxySignAgenda.PlanId = option.planId //项目id
			this.export = option.epoxy; // 是否是环氧
		},
		onUnload() {
			uni.removeStorageSync('option')
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			// 清除手写内容
			padinit() {
				this.$refs.drawview.init()
			},
			// 保存手写内容为图片（base64）
			padsave(code) {
				console.log("签收", this.export)
				console.log(code);
				if (code == 2) {
					this.padinit()
				}

				console.log("类型判断", typeof(this.export))

				if (this.export == 'true' || this.export == true) {
					console.log("签收环氧")
					this.$refs.drawview.save().then(res => {
						console.log('****res', res);
						this.epoxySignAgenda.ConfirmName = this.userInfo.name //姓名
						this.epoxySignAgenda.ConfirmCompany = this.userInfo.corpName //当前公司
						this.epoxySignAgenda.ConfirmUserId = this.userInfo.id //签收人ID
						this.epoxySignAgenda.ConfirmPhone = this.userInfo.phone //签收人手机号
						this.epoxySignAgenda.ConfirmStatus = 2 //签收状态
						// ***********
						this.epoxySignAgenda.SignImgUrl = res.tempFilePath //图片地址
						// this.epoxySignAgenda.EpPrjId = this.id //项目id
						// this.epoxySignAgenda.PlanId = this.id //项目id

						console.log('*****', this.epoxySignAgenda);
						this.$http.urlFileUpload("api/Agenda/EpoxySignAgenda", {
							files: [{
								path: res.tempFilePath
							}], // 必填 临时文件路径 格式: [{path: "图片地址"}]
							data: this.epoxySignAgenda, //可不填
							name: "files", //默认 file
							isPrompt: true, //（默认 true 说明：本接口抛出的错误是否提示）
							load: true, //（默认 true 说明：本接口是否提示加载动画）
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
							isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用）
							maxSize: 40000000, //（默认 无 说明：上传的文件最大字节数限制，默认不限制）
							onEachUpdate: res => {
								console.log("单张上传成功返回：", res);
							},
							onProgressUpdate: res => {
								console.log("上传进度返回：", res);
							}
						}).then(res => {
							console.log("全部上传完返回结果：", res);
							uni.navigateBack({
								delta: 3
							})

							uni.showToast({
								title: '签收成功',
								icon: 'none',
							})
						});

					})
				} else {
					console.log("签收兼备修")
					this.$refs.drawview.save().then(res => {
						console.log('****res', res);
						this.signAgenda.Name = this.userInfo.name //姓名
						this.signAgenda.company = this.userInfo.corpName //当前公司
						this.signAgenda.prjInfoId = this.id //项目id
						this.signAgenda.confirmBy = this.userInfo.id //签收人ID
						this.signAgenda.ConfirmStatus = code //签收状态

						// console.log(this.signAgenda);
						this.$http.urlFileUpload("api/Agenda/SignAgenda", {
							files: [{
								path: res.tempFilePath
							}], // 必填 临时文件路径 格式: [{path: "图片地址"}]
							data: this.signAgenda, //可不填
							name: "files", //默认 file
							isPrompt: true, //（默认 true 说明：本接口抛出的错误是否提示）
							load: true, //（默认 true 说明：本接口是否提示加载动画）
							header: { //默认 无 说明：请求头
								'Content-Type': 'application/json'
							},
							isFactory: true, //（默认 true 说明：本接口是否调用公共的数据处理方法，设置false后isPrompt参数奖失去作用）
							maxSize: 40000000, //（默认 无 说明：上传的文件最大字节数限制，默认不限制）
							onEachUpdate: res => {
								console.log("单张上传成功返回：", res);
							},
							onProgressUpdate: res => {
								console.log("上传进度返回：", res);
							}
						}).then(res => {
							console.log("全部上传完返回结果：", res);

							uni.navigateBack({
								delta: 2
							})
							uni.showToast({
								title: '签收成功',
								icon: 'none',
							})
						});

					})
				}

				// 地址模拟签收和确认
				// https://uni.epumping.com/doc/20220621/685cac98-6021-457a-b783-09c576028891.pdf
				// uni.navigateBack({
				// 	delta: 1, //返回层数，2则上上页
				// })
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.button {
		width: 100%;
		height: 80rpx;
		color: #27408B;
		position: fixed;
		bottom: 50rpx;
		display: flex;
		justify-content: space-around;

		>view {
			width: 25%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;
			border-radius: 40rpx;
			background-color: #f5f5f5;
		}

		>view:nth-child(3) {
			color: #b5001e;
		}

		>view:nth-child(3):hover {
			background-color: #D8D8D8;
		}

	}
</style>
